<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 我们现在设置好了当前的一个html字体大小为16px
            也就是说下面的p标签的那句话为16px
            同时这个页面 1rem = 16px */
        /* html{
            
            font-size: 39.0px;
        } */
        /* 

        （上面）我们自己手写就很麻烦 所以就有一个东西帮我们把这些操作写在一个页面里 叫做媒体查询(下面)
        */
        /* @media screen and (min-width:390px) {
            html{
                font-size: 39px;
            }
        }
        /* 12pro */
        /* xr */
        /*@media screen and (min-width:414px) {
            html{
                font-size: 41.4px;
            }
        } */

        /* 以上两个为媒体查询法

        假设不用这两个，就使用flexible(可伸缩)这个插件就可以满足我们完成移动端适配
        新建02.fexible.js文件，内容复制gethub（点进amfe/lib-flexible），里面的index.js全部

        （完整使用为下载felxible插件）
        */
        .box{
            background-color: pink;
            height: 10rem;
            width: 10rem;
        }
    </style>
</head>
<body>
    <p>开发者论坛</p>
    <div class="box"></div>
    <script src="./02.frexible.js"></script>
    <!-- 引入后在页面显示都是百分之百的铺满显示 
        1.方式为引入
            2.下载插件   npm i -S amfe-flexible           ️flexible的下载命令  -->

            <!-- 网址https://github.com/ -->
            
            <!-- 流程 -->
                <!-- 在下载成功后在node-module文件夹里会有一个amfe-flexible文件的 -->

                    <!-- amfe-flexible可以自动的做到在不同的屏幕里 将一个html大小设置为屏幕
                        大小的十分之一 在我们的项目里通过npm i 指令下载这个插件 -->

                <!-- 导入flexible：在全局文件mian.js做导入-->

        <!--3.使用第三种方式的理由【
                a.我们用rem这个单位做移动端适配固然很好 但是一般来说设计人员的设计稿只有px这个单位
                b.那你就要自己来转换 将px单位转成rem单位 写在我们样式代码里
                c.所以 我们还是不可以直接在我们的样式代码里rem单位
                d.我们需要写在代码里依然是px单位 但是通过某个插件 然后在我们运行代码的时候 自动的把px单位转化为rem单位
                e.这种在我们写完css代码后对css代码进行处理的插件叫做后css处理器
            】
                a.在vant2 （https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage） 
                b.进阶用法里面   
                c.rem布局适配
                d.postcss.pxtorem
                    下载postcss这个插件  --命令npm install postcss postcss-pxtorem --save-dev
                    复制这段代码放进新建postcss.config.js里面（注：与src平级）
                        module.exports = {
                            plugins: {
                            'postcss-px-to-viewport': {
                                viewportWidth: 375,
                            },
                            },
                        };

                
        -->
                



<!-- 
    记录
        02-检验flexible是否有效    用来验证下载的flexible插件在app.vue界面是否有效

        postcss.config.js【
        
        】


        我们现在写的是登陆页的代码 所以不是直接跟之间一样直接在app.vue文件写代码  
        而是在views页面文件夹里创建一个专门写登陆页的Login文件夹 然后在里面写登陆页的内容
            第一步：创建相关页面
            第二步：在这个页面里面写相关代码
            第三步：添加路由规则并且写路由出口（06-）
                项目正真渲染的四APP.vue界面，所以要在app.vue上写路由出口（07路由出口.gpn）把路由文件渲染到app。vue页面


-->
</body>
</html>